<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_watch实现</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        computed(计算属性)和watch(侦听属性)
            1、computed能完成的功能,watch都可以实现
            2、watch能完成的功能，1、computed不一定能完成，例如：watch可以进行异步操作。
        两个重要的小原则：
            1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
            2、所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数    
            这样this的指向才是vm 或 组件实例对象
     -->





    <!--准备好一个容器-->
    <div id="root">
        <!-- value可以设置初始值
             value中的初始值想使用data中属性值  需要使用指令语法 进行(单向/双向)数据绑定 -->
        姓：<input type="text" v-model="firstName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        <!-- {{fullName}}--将函数展示在页面上  
             {{fullName()}}--将fullName函数中的return返回值插入到插值表达式中
         -->
         <!-- 注意：
                简写时，我们不能在该插值表达式中加()  
                我们是要将该函数中的属性值放在vm.fullName中 -->
        全名：<span>{{fullName}}</span><br/><br/>
       
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    // 准备一个Vue实例
   const vm =  new Vue({
        el:'#root',
        data:{
            firstName:'南', // vm._data时 只有firstName、lastName属性 没有计算属性fullName
            lastName:'风',
            fullName:'南-风'  // 必须自己准备好fullName赋予初始值，不然引用该属性的插值表达式会报错
        },
       watch:{
           // 简写（将监视的属性写成函数的方式）--省略了handler函数
         /*   firstName(val){// val代表当前修改后的姓                    
               this.fullName = val + '-' + this.lastName                   
           }, */

            // 需求：修改姓时，延迟一秒种在进行展示全名
          firstName(val){// val代表当前的姓，接收前端修改的修改的值          
           setTimeout(() => {   // 定时器 延迟一秒
               this.fullName = val + '-' + this.lastName
                 },1000);              
             }, 
           lastName(val){// val代表当前修改后的名，接收前端修改的修改的值     
               this.fullName = this.firstName + '-' + val
           }

       }
    })
</script>
</html>
